<template>
  <div class="full">
    <div class="formc">
      <el-form :inline="true" ref="refform" :rules="rules" :model="state.pm" label-width="100px" class="form">
        <span class="title">设备基本信息</span>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备编号" prop="cameraIndexCode">
              <el-input v-model="state.pm.cameraIndexCode" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备名称" prop="cameraName">
              <el-input v-model="state.pm.cameraName" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备状态" prop="cameraState">
              <el-select v-model="state.pm.cameraState" placeholder="请选择" clearable style="width: 192px;">
                <el-option label="在线" :value="1" />
                <el-option label="离线" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备分类" prop="cameraType">
              <el-select v-model="state.pm.cameraType" placeholder="请选择" clearable style="width: 192px;">
                <el-option label="抓拍视频" value="1001" />
                <el-option label="普通视频" value="1002" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="管理部门">
              <el-input v-model="state.pm.dept" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备供应商">
              <el-input v-model="state.pm.manufacturer" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备品牌">
              <el-input v-model="state.pm.brand" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备型号">
              <el-input v-model="state.pm.model" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="图片">
              <el-upload :file-list="state.picList" list-type="picture-card" accept="image/*" :http-request="upfile"
                :limit="1" :on-preview="preview">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="line">&nbsp;</div>
        <span class="title">设备位置信息</span>
        <el-row>
          <el-col :span="8">
            <el-form-item label="所属区域" prop="region">
              <el-input v-model="state.pm.region" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属部位" prop="part">
              <el-input v-model="state.pm.part" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="码流类型" prop="streamType">
              <el-select v-model="state.pm.streamType" placeholder="请选择" clearable style="width: 192px;">
                <el-option label="主码流" :value="0" />
                <el-option label="子码流" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="关联设备">
              <el-select v-model="state.pm.lowCameraIds" multiple placeholder="请选择" clearable style="width: 1020px;">
                <el-option :label="item.cameraName" :value="item.cameraId" v-for="(item, index) in state.lowList"
                  :key="index" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="line">&nbsp;</div>
        <span class="title">设备运维信息</span>
        <el-row>
          <el-col :span="8">
            <el-form-item label="运维公司">
              <el-input v-model="state.pm.maintainCompany" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运营部门">
              <el-input v-model="state.pm.maintainOrg" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装交付时间">
              <el-date-picker type="date" v-model="state.pm.setupDate" value-format="YYYY-MM-dd" placeholder="选择时间" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="运维负责人">
              <el-input v-model="state.pm.maintainStaff" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话">
              <el-input v-model="state.pm.contactTel" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维修到期时间">
              <el-date-picker type="date" v-model="state.pm.maintainEnddate" value-format="YYYY-MM-dd"
                placeholder="选择时间" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备端口">
              <el-input v-model="state.pm.cameraSocket" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="IP 地址">
              <el-input v-model="state.pm.cameraIpv4" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注">
              <el-input v-model="state.pm.remark" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-dialog v-model="state.dialogVisible">
      <img w-full :src="state.dialogImageUrl" />
    </el-dialog>
    <div class="btns">
      <el-button class="cusb3" style="width:120px;" @click="emit('back')">返回</el-button>
      <el-button class="cusb2" style="width:120px;" @click="submit(refform)">保存</el-button>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
const state = reactive({
  pm: {},
  id: '',
  lowList: [],
  picList: [],
  dialogVisible: false,
  dialogImageUrl: ''
})
const emit = defineEmits(["back"]);
const refform = ref()
const rules = reactive({
  cameraIndexCode: [{ required: true, message: '请输入', trigger: 'blur' }],
  cameraType: [{ required: true, message: '请选择', trigger: 'blur' }],
  cameraName: [{ required: true, message: '请输入', trigger: 'blur' }],
  cameraState: [{ required: true, message: '请选择', trigger: 'blur' }],
  region: [{ required: true, message: '请输入', trigger: 'blur' }],
  part: [{ required: true, message: '请输入', trigger: 'blur' }],
  streamType: [{ required: true, message: '请选择', trigger: 'blur' }],
})
const upfile = (config) => {
  let data = new FormData()
  data.append("picfile", config.file)
  useApi.post('/arhome/common/picupload', data)
    .then(res => {
      state.pm.coverPic = res.data.resString
      state.picList = [{ name: 'pic', url: res.data.resString }]
    })
}
const preview = (up) => {
  state.dialogImageUrl = up.url
  state.dialogVisible = true
}
const getData = () => {
  useApi.post("/arhome/system/camera/detail", { cameraId: state.id }).then((res) => {
    state.pm = res.data.cameraInfo
    state.pm.optType = 'U'
    if (state.pm.coverPic && state.pm.coverPic != '') {
      state.picList = [{ name: 'pic', url: state.pm.coverPic }]
    }
  });
}
const getLow = () => {
  useApi.post("/arhome/system/camera/list", { page: 1, pagesize: 100 }).then((res) => {
    state.lowList = res.data.cameraList
  });
}
const submit = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      useApi.post("/arhome/system/camera/handle", state.pm).then((res) => {
        let id = res.data.resString
        useApi.post("/arhome/system/camera/relatelowdot", { cameraId: id, lowCameraIds: state.pm.lowCameraIds }).then((res) => {
          emit('back')
        }).catch(err => {
          ElMessage.error(err.data.message)
          emit('back')
        });
      }).catch(err => {
        ElMessage.error(err.data.message)
      });
    } else {
      ElMessage.error('请完整填写信息')
    }
  })
}
onMounted(() => {
  let store = useMyStore()
  state.id = store.params.e1 || ''
  if (state.id != '') {
    getData()
  } else {
    state.pm = { optType: 'A' }
  }
  getLow()
})
</script>

<style lang="scss" scoped>
.formc {
  width: 100%;
  height: 580px;
  padding: 0 20px;
  color: #ffffffc0;
  border-bottom: 1px solid #0F7BC4;
  border-image: linear-gradient(90deg, rgba(207, 245, 255, 0), rgba(233, 245, 255, 1), rgba(235, 251, 255, .8), rgba(163, 237, 255, 0)) 2 2;

  .form {
    display: flex;
    flex-direction: column;
    --el-color-danger: #ffffff;

    :deep(.el-form-item__label) {
      color: #ffffffc0;
    }

    .title {
      width: 200px;
      height: 40px;
      padding-left: 10px;
      font-size: 16px;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        height: 15px;
        width: 4px;
        background: #ffffffc0;
      }
    }
  }
}

.btns {
  margin-top: 20px;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.line {
  width: 100%;
  height: 1px;
  margin-bottom: 10px;
  border-bottom: 1px solid #0F7BC4;
  border-image: linear-gradient(90deg, rgba(207, 245, 255, 0), rgba(233, 245, 255, .3), rgba(235, 251, 255, .3), rgba(163, 237, 255, 0)) 2 2;
}

:deep(.el-checkbox) {
  width: 84px;
  height: 70px;
  margin: 5px;
  position: relative;
  background-image: url('/images/bgcheck.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;

  &:hover {
    background-image: url('/images/bgcheckhot.png');
  }

  .el-checkbox__input {
    position: absolute;
    left: 5px;
    top: 5px;
  }

  .cuschk {
    width: 84px;
    height: 80px;
    margin-left: -9px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .img {
      width: 30px;
      height: 30px;
    }

    .txt {
      margin-top: 5px;
      font-weight: 600;
      font-size: 12px;
      color: #FFFFFFB4;
    }
  }
}

:deep(.el-select) {
  --el-input-text-color: #ffffff;

  .el-select__wrapper {
    background: #003D6399;
    color: #FFFFFF;
    border: none;
    box-shadow: none;
    border-radius: 0px !important;
  }
}

:deep(.el-input) {
  --el-input-text-color: #ffffff;
  --el-input-bg-color: #003D6399;
}

:deep(.el-textarea) {
  --el-input-bg-color: #003D6399;
  --el-input-text-color: #ffffff;
}

:deep(.el-upload) {
  width: 56px !important;
  height: 36px !important;
  border-radius: 0px !important;
  background: #003D6399;
  border: none;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 56px !important;
  height: 36px !important;
}

:deep(.el-upload-list--picture-card) {
  :nth-child(even) {
    display: none;
  }
}

:deep(.el-date-editor) {
  width: 192px;

  .el-input__wrapper {
    background-color: #003D6399;

    .el-input__inner {
      color: #FFFFFF;
    }
  }
}
</style>